
<template>
    <el-form   ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="名称">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="ruleForm.sex"  />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="ruleForm.address" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
 
      </el-form-item>
    </el-form>
  </template>
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import router from '@/router';
  interface RuleForm {
    name: string
    sex: string
    address: string

  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    name: '',
    sex: '',
    address: '',
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: '名称不能为空', trigger: 'blur' },
    
    ],
    sex: [
      {
        required: true,
        message: '性别不能为空',
        trigger: 'change',
      },
    ],
    address: [
      {
        required: true,
        message: '地址不能为空',
        trigger: 'change',
      },
    ]
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        ElMessage.success('添加成功') 
        router.push('/sho')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>
  